<template>
	<view class="container" style="display: flex; height: 100vh;">
		<!-- 侧边栏 - mas数据 -->
		<view class="sidebar" style="width: 25%; background-color: #f5f5f5; padding: 20rpx;">
			<view v-for="item in mas" :key="item.id"
				:class="{'sidebar-item': true, 'active': currentSubjectId === item.id}" @click="switchSubject(item.id)"
				style="padding: 15rpx; border-radius: 8rpx; margin-bottom: 10rpx; cursor: pointer;">
				{{item.name}}
			</view>
		</view>

		<!-- 主内容区 -->
		<view class="main-content" style="width: 75%; padding: 20rpx;">
			<!-- 选项卡按钮 -->
			<view style="display: flex; margin-bottom: 30rpx;">
				<view :class="index == activeTab ? 'tab-btn active':'tab-btn'" @click="changeTab(index)" :key="index"
					v-for="(item, index) in dataList"
					style="padding: 12rpx 30rpx; border-radius: 8rpx 8rpx 0 0; margin-right: 10rpx; cursor: pointer;">
					{{item.option}}
				</view>
			</view>

			<!-- 试卷内容区域 -->
			<view class="paper-container"
				style="background-color: white; border-radius: 8rpx; padding: 20rpx; box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);">
				<!-- 表格头部 -->
				<view class="table-header"
					style="display: flex; width: 100%; border-bottom: 1px solid #eee; padding: 15rpx 0;">
					<view style="width: 20%; font-weight: bold;">序号</view>
					<view style="width: 40%; font-weight: bold;">名称</view>
					<view style="width: 40%; font-weight: bold;">操作</view>
				</view>

				<!-- 表格内容 -->
				<view class="table-body">
					<view v-for="(item, index) in currentPapers" :key="item.id || 'paper-' + index"
						:class="{'table-row': true, 'active': currentPaperId === item.id}" @click="selectPaper(item.id)"
						style="display: flex; width: 100%; padding: 15rpx 0; border-bottom: 1px solid #f5f5f5; cursor: pointer;">
						<view style="width: 20%;">{{item.id}}</view>
						<view style="width: 40%;">{{item.name}}</view>
						<view style="width: 40%; color: #3F9EFF;">开始答题</view>
					</view>
				</view>

				<!-- 无数据状态 -->
				<view v-if="currentPapers.length === 0 && !loading"
					style="text-align: center; padding: 50rpx 0; color: #999;">
					暂无数据
				</view>

				<!-- 加载状态 -->
				<view v-if="loading" style="text-align: center; padding: 50rpx 0;">
					加载中...
				</view>
			</view>
			<uni-section title="图标样式" subTitle="使用 show-icon 属性显示图标按钮" type="line" padding>
				<uni-pagination :show-icon="true" :total="10" title="" />
			</uni-section>
		</view>
	</view>
</template>

<script>
	import http from '../../http.js'
	export default {
		name: "tab",
		data() {
			return {
				activeTab: 0, // 当前选中的选项卡
				currentSubjectId: null, // 当前选中的学科ID
				currentPaperId: null, // 当前选中的试卷ID
				dataList: [{
						option: '固定试卷'
					},
					{
						option: '时段试卷'
					}
				],
				mas: [], // 学科数据
				subjectPapers: {}, // 按学科ID存储的试卷数据
				loading: false, // 加载状态
				error: null, // 错误信息
			}
		},
		computed: {
			// 根据当前学科和选项卡动态获取试卷数据
			currentPapers() {
				if (!this.currentSubjectId) return [];

				const subjectKey = `subject_${this.currentSubjectId}`;
				const tabType = this.activeTab === 0 ? 'fixed' : 'time';

				return (this.subjectPapers[subjectKey] && this.subjectPapers[subjectKey][tabType]) || [];
			}
		},
		methods: {
			// 切换选项卡
			changeTab(index) {
				this.activeTab = index;
				this.currentPaperId = null; // 重置选中状态

				// 加载对应学科和类型的试卷数据
				if (this.currentSubjectId) {
					this.loadPapers(this.currentSubjectId, this.activeTab === 0 ? 1 : 4);
				}
			},

			// 切换学科
			switchSubject(subjectId) {
				this.currentSubjectId = subjectId;
				this.currentPaperId = null; // 重置选中状态

				// 加载对应学科的试卷数据
				this.loadPapers(subjectId, this.activeTab === 0 ? 1 : 4);
			},

			// 选择试卷
			selectPaper(id) {
				this.currentPaperId = id;
				// 可以在这里添加试卷详情的逻辑
			},

			// 加载试卷列表
			loadPapers(subjectId, paperType) {
				const subjectKey = `subject_${subjectId}`;
				const tabType = paperType === 1 ? 'fixed' : 'time';

				// 检查是否已加载过数据
				if (
					this.subjectPapers[subjectKey] &&
					this.subjectPapers[subjectKey][tabType] &&
					this.subjectPapers[subjectKey][tabType].length > 0
				) {
					return;
				}

				this.loading = true;
				this.error = null;

				http({
					url: '/api/student/exam/paper/pageList',
					method: 'POST',
					data: {
						paperType: paperType, // 1为固定 4为时段试卷
						subjectId: subjectId, // 学科id
						pageIndex: 1, // 页数 - 修改为1，原代码中设为10可能导致第一页数据丢失
						pageSize: 100 // 每页条数 - 增大以获取更多数据
					}
				}).then(res => {
					console.log(res);
					this.loading = false;

					if (res.code === 1) {
						const papers = res.response.list || [];

						// 更新学科试卷数据
						this.subjectPapers = {
							...this.subjectPapers,
							[subjectKey]: {
								...this.subjectPapers[subjectKey],
								[tabType]: papers
							}
						};
					} else {
						this.error = res.message || '获取数据失败';
					}
				}).catch(err => {
					console.error(err);
					this.loading = false;
					this.error = '网络请求错误';
				});
			},

			// 加载学科列表
			loadSubjects() {
				this.loading = true;

				http({
					url: '/api/student/education/subject/list',
					method: 'POST',
				}).then(res => {
					console.log(res);
					this.loading = false;

					if (res.code === 1) {
						this.mas = res.response || [];

						// 如果有学科数据，默认选中第一个学科
						if (this.mas.length > 0) {
							this.currentSubjectId = this.mas[0].id;
							this.loadPapers(this.mas[0].id, 1); // 加载第一个学科的固定试卷
						}
					} else {
						this.error = res.message || '获取学科数据失败';
					}
				}).catch(err => {
					console.error(err);
					this.loading = false;
					this.error = '网络请求错误';
				});
			}
		},
		onLoad() {
			// 页面加载时先获取学科列表
			this.loadSubjects();
		}
	}
</script>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
		font-size: 28rpx; // 适当增大字体
		box-sizing: border-box;
	}

	.sidebar-item {
		background-color: #e9e9e9;

		&.active {
			background-color: #3F9EFF;
			color: white;
		}
	}

	.tab-btn {
		background-color: #f0f0f0;

		&.active {
			background-color: white;
			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
			font-weight: bold;
		}
	}

	.table-row {
		&:hover {
			background-color: #f8f8f8;
		}

		&.active {
			background-color: #e8f4ff;
		}
	}
</style>